<template>
    <div>
        <h1>成绩</h1>
        <div class="box">
            <h2>
                <span>总分:100</span>
                &nbsp;
                <span>题目:20道</span>
                &nbsp;
                <span>班级:JAVA87</span>
                &nbsp;
                <span>难度:87%</span>
            </h2>
            <el-table :data="tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)" style="width: 701px"
                :default-sort="{ prop: 'date', order: 'descending' }">
                <el-table-column prop="name" label="姓名" width="120" align="center">
                </el-table-column>
                <el-table-column prop="date" label="日期" sortable width="200" align="center">
                </el-table-column>
                <el-table-column prop="time" label="用时" sortable width="180" align="center">
                </el-table-column>
                <el-table-column prop="fraction" label="分数" sortable width="200" align="center">
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                :page-sizes="[5, 10]" :page-size="5" layout="total, sizes, prev, pager, next, jumper"
                :total="tableData.length">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            pagesize: 5,
            currentPage: 1,
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                time: '1540秒',
                fraction: '67'
            }, {
                date: '2016-05-02',
                name: '王小狗',
                time: '1541秒',
                fraction: '68'
            }, {
                date: '2016-05-02',
                name: '王小猫',
                time: '1550秒',
                fraction: '69'
            }, {
                date: '2016-05-02',
                name: '王小',
                time: '1520秒',
                fraction: '70'
            }, {
                date: '2016-05-02',
                name: '王小猫',
                time: '1550秒',
                fraction: '69'
            }]
        }
    },
    methods: {
        formatter(row, column) {
            return row.address;
        },
        handleSizeChange(val) {
            this.$data.pagesize = val//将每页显示的条数 = 改变的值
            // console.log(`每页 ${val} 条`)//每页下拉显示数据
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`) //点击第几页
            this.$data.currentPage = val //然后将当前页 = 改变的值
        },
    },
}
</script>

<style lang="less" scoped>
h2 {
    margin-top: 0;
}

h1 {
    text-align: left;
    padding-left: 10px;
}

.box {
    text-align: left;
    padding: 5px 20px;
}
</style>